<template>
  <div class="container">
    <div class="window-poster">
      <img :src="img_url+top_banner"
           v-if="img_url&&top_banner!=''"
           alt=""
           mode="widthFix"
           class="bg-img">
    </div>

    <!-- <div class="top">
      <img :src="base_url+'/mp_3.0/bg.png'"
           alt=""
           v-if="base_url"
           class="img"
           mode="widthFix">
      <div class="logo">
        <img :src="base_url+'/mp_3.0/logo.png'"
             v-if="base_url"
             alt=""
             class="logo-icon">
      </div>
    </div>
    <div class="title">
      美亿齿+
    </div>

    <div class="btn-bar">
     
    </div> -->
    <!-- 模态框 -->
    <div class="model login"
         v-if="!bind_tel">
      <button class="login-btn"
              open-type="getUserInfo"
              @getuserinfo="get_info">
        立即登录
      </button>
      <div class="back-btn"
           @tap.stop="back()">
        暂不登录
      </div>
    </div>
    <div class="model bind-tel"
         v-if="bind_tel">
      <button class="tel-btn"
              open-type="getPhoneNumber"
              @getphonenumber="get_tel">请绑定手机号</button>
    </div>
  </div>

</template>


<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      code: "",
      u_id: "",
      login_data: {},
      jump_url: "",
      title: "",
      s_data: {},
      bind_tel: false,
      top_banner: ""
    };
  },
  methods: {
    get_info (e) {
      let that = this;
      // 未登录
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/minapp/login",
        {
          code: that.login_data.code,
          iv: e.mp.detail.iv,
          encryptedData: e.mp.detail.encryptedData,
          avatarUrl: e.mp.detail.userInfo.avatarUrl,
          nickName: e.mp.detail.userInfo.nickName,
          source: that.s_data.d || ''
        },
        response => {
          let res = response.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            //   登录成功了
            //绑定手机号弹出获取手机号弹框
            wx.setStorageSync("open_id", res.data.user_jwt)
            this.user_jwt = res.data.user_jwt
            if (res.data.status == 1) {
              // 未绑定手机号  弹出绑定手机号的弹窗
              this.bind_tel = true
            } else {
              // 绑定了手机号  显示手机号  确认登录
              wx.redirectTo({ url: `/pages/package_main/login_showtel/main?user_jwt=${res.data.user_jwt}&tel=${res.data.phone}&source=${res.data.source}` });
            }
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: false
            });
          }
        }
      );
      //   code失效  重新获取
      this.get_logincode()
    },
    get_tel (e) {
      console.log(e);
      let that = this;
      let s_data = wx.getStorageSync("s_data");
      if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
        //同意获取手机号
        wx.showLoading({
          title: "", //提示的内容,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        wx.login({
          success: result => {
            //手机号转换
            //通过手机查上下级状态
            common.fly_post(
              "api/v4_5/super_code/get_phone_bycode",
              {
                iv: e.mp.detail.iv,
                code: result.code,
                encryptedData: e.mp.detail.encryptedData,
                status: 1,
                source: this.source,
                user_jwt: this.user_jwt
              },
              response => {
                let res = response.data;
                wx.hideLoading();
                if (res.status_code == 0) {
                  console.log(res);
                  this.real_tel = res.data.phone;
                  this.bindtel(res.data.phone);
                }
              }
            );
          }
        });
      }
    },
    bindtel (phone) {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      //通过手机查上下级状态
      common.fly_post(
        "api/v4_5/super_code/get_is_superior",
        {
          status: 2,
          phone: phone,
          source: this.source,
          user_jwt: this.user_jwt
        },
        response => {
          let res = response.data;
          let obj = {
            status: 2,
            phone: phone,
            source: this.source,
            user_jwt: this.user_jwt
          };
          wx.setStorageSync("loginobj", obj);
          wx.hideLoading();
          if (res.status_code == 0) {
            console.log(res);
            if (res.data.is_superior == 0) {
              //没有上级关系
              wx.navigateTo({
                url: "/pages/package_main/recommend/main"
              });
            } else {
              // 有上下级
              this.oldfun();
            }
          }
        }
      );
    },
    oldfun () {
      let that = this
      common.fly_post(
        "api/v4_5/minapp/bind_mobile",
        {
          status: 2,
          phone: this.real_tel,
          source: this.source,
          user_jwt: this.user_jwt
        },
        response => {
          let res = response.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            wx.setStorageSync("user_token", res.data.token);
            wx.setStorageSync("user_id", res.data.user_id);
            wx.setStorageSync("account_type", res.data.user.data.account_type);
            wx.setStorageSync("role_id", res.data.user.data.role_id);
            wx.setStorageSync("is_plus", res.data.user.data.is_plus);
            wx.setStorageSync(
              "is_home_plus_entrance",
              res.data.user.data.is_home_plus_entrance
            );
            //  that.bind_user();
            wx.showToast({
              title: "登录成功", //提示的内容,
              icon: "success", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                that.getuser()
              }
            });
            if (res.data.loginType == 0) {
              //注册
              wx.navigateTo({
                url: "/pages/package_main/recommend/main"
              });
            } else {
              //已经注册
              /**分享过来要跳转到相对应的页面的方法 */
              let s_data = wx.getStorageSync("s_data");
              wx.getStorage({
                key: "jump_url",
                success: result => {
                  console.log(result.data);
                  if (s_data.t == 13) {
                    wx.reLaunch({
                      url: result.data + "&share_id=" + s_data.sid
                    });
                  } else {
                    wx.redirectTo({ url: result.data });
                  }
                  // wx.redirectTo({ url: result.data });
                  wx.removeStorage({
                    key: "jump_url",
                    success: res => { }
                  });
                },
                fail: () => {
                  //   绑定成功  返回到上一级
                  setTimeout(() => {
                    wx.navigateBack({
                      delta: 2 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                    });
                  }, 1500);
                },
                complete: () => { }
              });
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false //显示透明蒙层，防止触摸穿透,
            });
          }
        }
      );
    },
    get_logincode () {
      wx.login({
        success: res => {
          this.login_data = res
        },
        fail: () => {
          wx.showToast({
            title: '登录失败', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        },
        complete: () => { }
      });
    },

    band_user () {
      let that = this
      if (wx.getStorageSync('s_data')) {
        let s_data = wx.getStorageSync('s_data')
        common.fly_post(
          "api/v4_5/user/share",
          {
            type: s_data.t,
            sid: s_data.sid || 0,
            d: s_data.d
          },
          response => {
            wx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
          }
        );
      }

    },
    back () {
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    // 获取背景
    get_bg () {
      common.fly_post("api/v4_5/get_background", {
        xcx_bg: 1
      }, result => {
        let res = result.data;
        if (res.status_code == 0) {
          if (res.data.xcx_bg && res.data.xcx_bg[0] && res.data.xcx_bg[0].bg_image) {
            this.top_banner = res.data.xcx_bg[0].bg_image
          }

        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: false
          });
        }
      });
    },
  },
  onLoad () {

    wx.setNavigationBarTitle({
      title: "美亿齿+"
    });
    wx.setNavigationBarColor({
      frontColor: '#ffffff', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: '3EB0A9', //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.get_bg()
    this.s_data = wx.getStorageSync('s_data') || {};
    this.get_logincode()
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(216, 216, 216, 1);
  display: flex;
  flex-direction: column;
  .window-poster {
    flex: 1;
    overflow: hidden;
    position: relative;
    .bg-img {
      width: 100%;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .model {
    width: 100%;
    background-color: #fff;
    &.login {
      .login-btn {
        width: 260px;
        height: 36px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        border-radius: 8px;
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
        text-align: center;
        margin: 19px auto 24px;
      }
      .back-btn {
        width: 260px;
        height: 36px;
        background: rgba(232, 232, 232, 1);
        border-radius: 8px;
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(170, 170, 170, 1);
        line-height: 36px;
        text-align: center;
        margin: 0 auto 44px;
      }
    }
    &.bind-tel {
      .tel-btn {
        width: 260px;
        height: 36px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        border-radius: 8px;
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
        text-align: center;
        margin: 59px auto 64px;
      }
    }
  }
}
</style>
